<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日新闻网登陆页</title>
    <!-- 引入样式表 ctrl+/ -->
    <!-- 标签名+tab键，生成html标签 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- login登陆页的样式表 -->
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <!-- 输入! + tab键，生成HTML结构 -->

    <!-- 登陆框 -->
    <div id="login-box">
        <h3>今日新闻网 登陆/注册</h3>
        <p>
            <a href="#" class="active">登陆</a>
            <a href="#">注册</a>
        </p>
        <div class="login-register">
            <div class="login-login">
                <div>
                    用户名：<input type="text" name="userName" id="user">
                </div>
                <div>
                    密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password">
                </div>
                <div>
                    验证码：<input type="text" name="verify" id="verify">
                    <span>5899</span>
                </div>
                <div>
                    <input type="submit" id="login__btn" value="登陆">
                </div>
                <div>
                    <a href="#">《用户协议》</a>
                    和
                    <a href="#">《用户隐私》</a>
                    <a href="#" class="login--rem">忘记密码</a>
                </div>
            </div>
            <div class="login-reg">
                <div>
                    用户名：<input type="text" name="newUser" id="newUser">
                </div>
                <div>
                    密&nbsp;&nbsp;&nbsp;码：<input type="password" name="newPass" id="newPass">
                </div>
                <div>
                    确认密码：<input type="password" name="rePass" id="rePass">
                </div>
                <div>
                    <input type="submit" id="register__btn" value="注册">
                </div>
                <div>
                    <a href="#">《用户协议》</a>
                    和
                    <a href="#">《用户隐私》</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入jquery库文件 -->
    <script src="./js/jquery-3.3.1.min.js"></script>
    <!-- jquery脚本编写 -->
    <script>
        // 通过标签名获取回来的元素，获取到的是多个标签！！
        $("#login-box p a").click(function(){
            // 如果要获取当前选中的那个a链接，需要使用$(this)获取它
            $(this).addClass("active").siblings("a").removeClass("active");

            // 先获取，当前元素的索引
            var index = $(this).index();
            console.log(index);
            // 对应的框进行显示隐藏
            $(".login-register>div").eq(index).show().siblings("div").hide();
        });
    </script>
</body>
</html>